<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id="app">
	  {{ message }}
	</div>

	<div class="app-2">
	  <span v-bind:title="message">
	    鼠标悬停几秒钟查看此处动态绑定的提示信息！
	  </span>
	</div>
	
	<div class="app-100">
		<span v-bind:title='stp'>
			鼠标悬停
		</span>
	</div>

	<div id="app-3">
		<p v-if="seen">现在你看到我了</p>
	</div>

	<div id="app-4">
		<ol>
			<li v-for="todo in todos">
			  {{ todo.text }}
			  {{ todo.tb }}
			</li>
		</ol>
	</div>

</body>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			message: 'Hello Vue!'
		}
	})
	var app2 = new Vue({
		el: '.app-2',
		data: {
			message: '页面加载于 ' + new Date().toLocaleString()
		}
	})
	var app100 = new Vue({
		el: '.app-100',
		data: {
			stp: '这是新型数据'
		}
	})
	var app3 = new Vue({
		el: '#app-3',
		data: {
			seen: true
		}
	})
	var app4 = new Vue({
		el: '#app-4',
		data: {
			todos: [
				{ text: '学习 JavaScript' , tb: '二级'},
				{ text: '学习 Vue' },
				{ text: '整个牛项目' }
			]
		}
	})

</script>
</html>